<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解构</title>
</head>
<body>
<script>
/*
 数组解构: 将数组的数组元素快速批量赋值给一系列变量的简洁语法
        1.基本语法
            [替换变量名1 , 替换变量名2] = 数组名           // 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
            其中: 数组名 === [变量名 , 变量名2] === [变量值1 , 变量值2] ——————— 都是指针
            [max , min] = arr
            [max , min] = [a , b]
            [max , min] = [1 , 2]
            (注:本质上都是指针)
        2.注意点
            以数组为开头的情况前面必须加 ; ———————— 立即执行函数前面也必须加 ;

   对象解构:
       1.基本语法
            const { 替换变量名1 , 替换变量名2 } = { 属性名1: 属性值1 , 属性名2: 属性值2 }
            其中: 替换变量名和属性名
            const { 替换变量名1: 新变量名1 , 替换变量名2: 新变量名2 } = { 属性名1: 属性值1 , 属性名2: 属性值2 }
            其中: 替换变量名被解构成了新变量名
            const { 替换变量名1: 新变量名1} = { 属性名1: 属性值1 , 属性名2: 属性值2 }
            其中: 替换变量名只有部分表示部分结构
            const [{ 替换变量名1: 新变量名1 , 替换变量名2: 新变量名2 }] = [{ 属性名1: 属性值1 , 属性名2: 属性值2 }]
            其中: 对象数组被解构成了数组

   注意: 解构时只要接的是引用类型就是浅拷贝、只要接的是值类型就是深拷贝
* */
    // 数组解构
    const arr = [100 , 60 , 80]
    const [max , min , avg] = arr
    console.log(max)
    console.log(min)
    console.log(avg)
    // 典型应用————交换两个变量(什么JB玩意)
    let a1 = 1
    let b1 = 2; // 以数组开头的，前面有代码的必须要加;  —————— 立即执行函数也必须加;
    [b1 , a1] = [a1 , b1] // [a1 , b1] === [1 , 2] === arr
    console.log(a1 , b1)
    // 特殊情况1 ———— 变量多，单元值少
    const [a2 , b2 , c2] = [1 , 2]
    console.log(c2) // undefined
    // 特殊情况2 ———— 变量少，单元值多
    const [a3 , ...b3] = [1 , 2 , 3] // 这是真数组
    console.log(a3 , b3)
    // 为防止有undefined传递单元值的情况，可以为数组设置默认值
    const [a4 = '手机' , b4 = '华为'] = ['小米']
    console.log(a4 , b4)
    // 可以按需进行导入，忽略某些值
    const [a5 ,  , c5 , d5] = [1 , 2 , 3 , 4]
    console.log(a5 , c5 , d5)
    // 多维数组解构 ????
    const [a6 , b6 , [c6 , d6]] = [1 , 2 , [3 , 4]]
    const [ ,  , c7] = [1 , 2 , [3 , 4]]
    console.log(c6 , d6 , c7)

    // 对象解构
    const obj3 = {
        uname1: 'black',
        age1: 18
    }
    const {uname1 , age1} = obj3
    console.log(uname1 , age1)
    // 对象解构的变量名可以重新更名
    const {uname1: userName , age1: userAge} = obj3
    console.log(userName , userAge)
    // 对象结构可以部分解构
    const {uname1:unamePart} = obj3
    console.log(unamePart)
    // 可以解构数组对象
    const pig = [
        {
            uname: '佩奇' ,
            age: 6
        },
        {
            uname: '乔治' ,
            age: 4
        },
        {
            uname: '爸爸' ,
            age: 44
        },
        {
            uname: '妈妈' ,
            age: 44
        }
    ]
    const [{uname:name11 , age: age11},{uname:name22 , age: age22},{},{}] = pig
    console.log(pig)
    console.log(name11 , age11)
    console.log(name22 , age22)

    // 综合实例
    const msg = {
        "code": 200,
        "msg": "获取新闻列表成功",
        "data": [
            {
                "id": 1,
                "title": "5G商用自己，三大运营商收入下降",
                "count": 58
            },
            {
                "id": 2,
                "title": "国际媒体头条速览",
                "count":56
            },
            {
                "id":3,
                "title":"乌克兰和俄罗斯持续冲突",
                "count":1669
            }
        ]
    }
    // 对象解构(解构JSON)
    const {data: newData} = msg
    console.log(newData)
    newData.push({ "id": 4, "title": "国际媒体头条速览222", "count":222})
    console.log(msg)
    console.log(newData)
    // 对象解构的函数写法
    function render({data: myData}) { // 在这里进行的解构
        // {data: myData}中有三个关键词
        //      1.{}表示结构的内容为一个对象————实际为传进来的msg
        //      2.data表示把msg中的data解构出来
        //      3.myData表示给data赋值一个新变量为myData
        //      等价写法: let myData = msg.data
        console.log(myData)
    }

    render(msg)
</script>
</body>
</html>